<template>
  <div>
    <mt-header fixed title="购物车">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right">
        <router-link to="/search">搜索</router-link>
      </mt-button>
    </mt-header>
    <div class="main">
      <div class="main-user">
        <div class="user-img">
          <img src="../assets/user.jpg">
        </div>
        <div class="user-number">
          vue <p>绑定手机:10086111234</p>
        </div>
      </div>
      <div class="main-save">
        账号与安全<span>&gt;</span>
      </div>
      <div class="main-shoppingCar">
        <router-link to="/shoppingCar">我的购物车<span>&gt;</span></router-link>
      </div>
      <div class="main-address">
        <router-link to="/myaddress">收货地址管理<span>&gt;</span></router-link>
      </div>
      <mt-button size="large" type="primary" class="button">退出登录</mt-button>
    </div>
    <mt-tabbar class="footer" fixed>
      <mt-tab-item id="index">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/">首页</router-link>
      </mt-tab-item>
      <mt-tab-item id="sort">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/sort">分类</router-link>
      </mt-tab-item>
      <mt-tab-item id="shoppingCar">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/shoppingCar">购物车</router-link>
      </mt-tab-item>
      <mt-tab-item id="member" class="active">
        <img src="../assets/icon2.png" slot="icon">
        <router-link to="/member">会员中心</router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {

  data () {
    return {
    }
  },

  methods: {},

  created () {
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.footer a,
.mint-header a {
  color: white;
  text-decoration: none;
}
.mint-tabbar {
  background-color: #0094ff;
}
.main {
  margin-top: 40 / 16rem;
  padding: 20 / 16rem;
}
.user-img img {
  width: 50 / 16rem;
  height: 50 / 16rem;
}
.main-user a,
.main-save a,
.main-shoppingCar a,
.main-address a {
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #000;
  span {
    margin-right: 10 / 16rem;
  }
}
.main-user,
.main-save,
.main-shoppingCar,
.main-address {
  display: flex;
  border-bottom: 1 / 16rem solid #999;
}
.user-number {
  padding-left: 20 / 16rem;
  p {
    color: #aaa;
  }
}
.main-save,
.main-shoppingCar,
.main-address {
  height: 60 / 16rem;
  line-height: 60 / 16rem;
  justify-content: space-between;
  font-size: 20 / 16rem;
  span {
    margin-right: 10 / 16rem;
  }
}
.button {
  width: 90%;
  margin: 0 auto;
  margin-top: 10 / 16rem;
}
.active a {
  color: orange;
}
</style>
